<template>
  <el-container>
    <el-header style="height: 70px">
      <div>

        <span> api管理器 </span>
      </div>
      <!--      <el-button type="info" @click="logout">退出登录</el-button>-->
      <div>
        <el-dropdown
          style="height: 100%;" @command="handleCommand">
          <el-button type="primary" style="background: #553f34;border: none">
            <div class="userInfoBtn">
              <span style="margin-right: 5px">{{user.name}}</span>
              <img :src="baseFileUrl + user.headImgUrl" alt="" class="userHead"/><i
              class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="margin: 0">
            <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="relevance">账号关联</el-dropdown-item>
            <el-dropdown-item command="safe">安全设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header
    >
    <!--    <div class="chooseTeams" :class="isCollapse === true? 'chooseTeamsLeft' : 'chooseTeamsRight'">-->
    <!--      <template>-->
    <!--        <el-select v-model="value" filterable placeholder="请选择">-->
    <!--          <el-option-->
    <!--            v-for="item in options"-->
    <!--            :key="item.value"-->
    <!--            :label="item.label"-->
    <!--            :value="item.value">-->
    <!--          </el-option>-->
    <!--        </el-select>-->
    <!--      </template>-->
    <!--    </div>-->
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div id="toogleBtn" @click="toggleMenu"><i :class="menuBtn"></i></div>
        <!-- 实现菜单多级分类 -->
        <el-menu
          background-color="#553f34"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="this.$store.state.defaultIndex"
        >
          <!-- 引入组件 -->
          <menuItems :menuList="menuList"></menuItems>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import utils from '../../utils/sessionUtil'
  import store from '../../vuex/store'
  import menuItems from './components/menuItem.vue'

  export default {
    name: 'home',
    data () {
      return {
        //左侧菜单
        menuList: [],
        isCollapse: false,
        menuBtn: 'el-icon-s-fold',
        options: [{
          value: 'myProject',
          label: '个人项目'
        }, {
          value: 'createTeams',
          label: '创建新的团队'
        }],
        value: 'myProject',
        // user: {},
        baseFileUrl: this.$dataUtils.baseFileUrl
      }
    },
    created () {
      this.getMenuList()
      this.$store.state.defaultIndex = utils.session.get('activePath')
    },
    computed: {
      user: function () {
        return  this.$store.state.user
      }
    },
    components: {
      menuItems,
    },
    methods: {
      logout () {
        sessionStorage.clear()
        this.$router.push({path: '/login'})
      },
      getMenuList () {
        this.$dataUtils.getPrivateMenuList().then((res) => {
          this.menuList = res.data.private || []
          console.log(this.menuList)
        }, (err => {
          this.$message.error('文件不存在!')
        }))
      },
      toggleMenu () {
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) {
          this.menuBtn = 'el-icon-s-unfold'
        } else {
          this.menuBtn = 'el-icon-s-fold'
        }
      },
      handleCommand (command) {
        this.$message(command)
        switch (command) {
          case 'logout': {
            this.logout()
            break
          }
          case 'relevance': {

            break
          }
          case 'safe': {

            break
          }
          case 'userInfo': {
            this.$router.push({path: '/userInfo'})
            break
          }
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  .el-container {
    height: 100%;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .el-aside {
    background: #553f34;

    .el-menu {
      border-right: none;
    }
  }

  .logo {
    height: 50px;
    width: 50px;
  }

  #toogleBtn {
    color: white;
    font-size: 10px;
    line-height: 24px;
    text-align: right;
    background: #553f34;
    letter-spacing: 0.2em;
    cursor: pointer;
  }

  .el-header {
    background: #553f34;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 20px;

    > div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
      }
    }
  }

  .chooseTeamsLeft {
    background: #553f34;
    width: 64px;
    text-align: center;
  }

  .chooseTeamsRight {
    background: #553f34;
    width: 200px;
    text-align: center;
  }

  .userHead {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }

  .userInfoBtn {
    display: flex;
    align-items: center;
  }

  /*.chooseTeams{*/
  /*  position: absolute;*/
  /*}*/
</style>
